When you tailor your website with a new look and feel, a major component of that work is to restyle the primary navigation so that it matches the rest of your site. In iMIS, the primary nav bar is built using Telerik RadControls, which provides some powerful tools for building a dynamic menu system. In this blog post, I’m going to walk you through the steps you need to change your menu’s style. You have three options:
■ Choosing an out-of-the-box skin provided by Telerik
■ Building your own menu using Telerik’s Visual Style Builder
■ Styling your menu with just CSS instead of using the Telerik tools
Before I begin I would like to point out that in order to follow this guide you must be using iMIS 15.2 or later and an UltraWave-derivative theme, such as Aspen or Birch. You should also have experience with CSS, skins and theming, and have a basic understanding of Telerik RadControls.
What is PageNavR?
PageNavR is a powerful control that iMIS uses to display a website's primary navigation. The nav bar is automatically populated with each top-level navigation item, and each sub-item displays in a drop-down list that may expand to multiple levels.
When theming the control the most important thing to note is that the PageNavR control wraps a Telerik RadMenu control, so all the styles are, by default, controlled by Telerik's base styles.
What is the .skin file?
.Skin files are one of my favorite tools for theming in ASP.NET. They allow you to override default control behaviors in a theme-dependent way – meaning if you set a property in the Aspen skin file it does not affect how the control displays in Birch. This is especially helpful for exactly the property we will look at today: Skin.
Take a look at the Aspen.skin file in App_Themes/Aspen. You'll notice this line near the top of the page:
<asi:PageNavR runat="server" Skin="Aspen" EnableEmbeddedSkins="false" EnableRootItemScroll="false" Flow="Horizontal" DefaultGroupSettings_Flow="Vertical" DefaultGroupSettings_OffsetX="0" Width="100%"/>
These are just some of the many PageNavR properties available for control via the skin file. For now we're just going to focus on the second and third properties here: "Skin" and "EnableEmbeddedSkins".
The "EnableEmbeddedSkins" property determines whether or not the Telerik embedded skins should be loaded. If you are creating your own custom skin (as we have in Aspen) you MUST set this property to false.
Option 1: Choosing a skin provided by Telerik
To begin with, let's try using one of Telerik's embedded skins. Visit Telerik RadMenu Demo: First Look to find the skin you want. You will see a working demo of the RadMenu control, and at the top righthand corner there's a drop-down where you can control the skin. Try each one until you find the one that's right for your website.
Let's say we liked the WebBlue skin. All we have to do now is change the Skin property on the PageNavR control to Skin="WebBlue"and EnableEmbeddedSkins="true" and voila! We have a beautiful new blue menu bar!
For more information on .skin files you can visit MSDN's guide to ASP.NET Themes and Skins.
For the next step you have 2 options. If you found a Telerik skin that you basically like but might not prefer the color it's available in you can try out Option 1: Using the Visual Style Builder. But if you would prefer something a bit simpler and with greater control of the outcome skip to Option 2: No images, just CSS.
Option 2: Building your menu using the Visual Style Builder
Telerik's Visual Style Builder is a great tool for styling the RadMenu and other Telerik controls. It can take some getting used to, but once you get it you may never go back to editing the style by hand. I recommend visiting Telerik's Visual Style Builder Overview for a video tutorial, or follow the steps below:
1. Open the Telerik Visual Style Builder and select "New Skin". (Note: the Visual Style Builder is in Beta and there are still many kinks that are not quite fixed. For best results, be sure you're using the tool in Internet Explorer as it's not fully functional in any other browser.)
2. Name your
new skin (we'll call ours "MyNewSkin"), select the base skin you like (we're
using WebBlue), check the "Menu" checkbox and click "Create".
3. On the
colorize page, select your preferred color. (You can also click the "Shift
colors" tab to have finer control over the color.) I'm going to select #660000
from the drop-down to give my skin a maroon tone. Now click "Save" to see a
preview of your new skin.
4. If you're not happy with the color try again, or select "Close" (in the top right corner) and select a new base theme.
5. If you're completely satisfied with the outcome you can now download the generated images and CSS and jump to step 11.
6. If you wish to do some additional tweaking, click over to the "Fine-tune" tab. (Tip: The fine-tune functionality can be fairly fickle. Be sure to save frequently so that if you don't like the way something turns out you can click "load last save" to undo.)
7. It's a good idea to play around with the tool to get familiar with its functionality. Toy with all the properties to see what they do - remember, you can always click "load last save" to back up if you're unhappy with a change.
8. Start with
any universal changes you would like to make, such as changing the font on all
the navigation nodes. I would like to use 13 px Verdana because I think it's
easier to read, so I'm going to find the highest-level selector for which font
is an available option, in this case "Main items". Each time you make a change
the example dynamically responds.
9. Next look at the lower-level changes you would like to make. I noticed that the expandable root is difficult to read because of the dark font. To fix this I select the "Expandable root" node. In the "Text" menu I'll set the color to white.
10. Continue tweaking to your heart's content. When you're finished click "Save" then "Download" to get the necessary code and images.
11. Copy the unzipped files to your theme's folder, then back in the skin file set EnableEmbeddedSkins="false" and Skin="MyNewSkin" (or whatever your skin's name is).
Option 3: No images, just CSS
If you're not happy with any of the provided Telerik skins you can also start from scratch and create your own image-free styling. To do this you can either use the visual style builder (just go through and click "remove" on all the background attributes first) or by hand using CSS, with the aid of your browser's developer tools. If you choose to work by hand, I recommend beginning with a working skin and tweeking it as you like. I'm using Aspen as my base, but I recommend starting the new .css I created for this blog, which I've included as an attachment called Menu.Cottonwood.css.
In your menu CSS file, rename all of the base-level selectors to RadMenu_[Your theme name] (eg. RadMenu_MyTheme). In this example my theme is called Cottonwood, so I do a search and replace to find "Aspen" and replace with "Cottonwood". Next, use your browser developer tools to help you figure out how to modify the CSS to get your desired result. In your theme's skin file set EnableEmbeddedSkins="false" and Skin="Cottonwood" (or your skin's name).
And there you have it! A beautiful new nav bar that matches your website.
Feel free to comment if you're having any trouble styling the nav bar, or anything else on your iMIS website.
Here are some links that may be helpful to you while theming your website:
■ Creating a unique homepage with CSS and Javascript - includes a very helpful video if you're unfamiliar with browser developer tools
■ Telerik RadControl Demos - RadMenu